<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>租户管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>

<div id="app">

角色名称：<el-input v-model="query.name" style="width: 200px;" cleraable></el-input>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="租户id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="租户姓名">
        </el-table-column>
        <el-table-column
                prop="userNumLimit"
                label="用户限制">
        </el-table-column>
        <el-table-column
                prop="type"
                label="类型">
        </el-table-column>
        <el-table-column
                prop="enable"
                label="是否启用">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="expireTime"
                label="到期时间">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="备注">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">修改菜单</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button
                        size="mini"
                        type="warn" @click="editRole(scope.row.id)">分配菜单</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="修改菜单" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.mname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路径" :label-width="formLabelWidth">
                <el-input v-model="form.url" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateUser">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            total:0,
            dialogFormVisible:false,
            query:{
                mname:"",
                page:1,
                pageSize:2
            },
            form:{
                mname:"",
                rul:"",
            }

        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods: {
            updateUser(){
              axios.post(`/menu/update`,this.form).then(res=>{
                  this.$message({
                      type: 'success',
                      message: '修改成功!'
                  });
                  this.initData();
                  this.dialogFormVisible=false;
              })
            },
            handleEdit(index,row){
                this.dialogFormVisible=true;
                this.form=JSON.parse(JSON.stringify(row));
            },
            handleDelete(index,row){
                    this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post(`/menu/deleteOne?id=`+row.id).then(res=>{
                            this.initData();
                            this.$message({
                                type: 'success',
                                message: res.data

                            });
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData() {
                axios.post(`/tenant/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`, this.query).then(res => {
                    console.log(res.data)
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    if (this.tableData.length==0&&this.query.page>1){
                        this.query.page--;
                    }
                });


            },
        },
        created(){
            this.initData();
        }

    })
</script>

</body>
</html>